<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS 形状绘制</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
      }

      body {
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        padding: 40px;
      }

      .shape-item {
        background: white;
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        text-align: center;
      }

      .shape-label {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
      }

      .shape-demo {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      /* 三角形 */
      .triangle-up {
        width: 0;
        height: 0;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
        border-bottom: 150px solid #667eea;
        background: none;
      }

      .triangle-down {
        width: 0;
        height: 0;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
        border-top: 150px solid #667eea;
        background: none;
      }

      .triangle-left {
        width: 0;
        height: 0;
        border-top: 75px solid transparent;
        border-bottom: 75px solid transparent;
        border-right: 150px solid #667eea;
        background: none;
      }

      .triangle-right {
        width: 0;
        height: 0;
        border-top: 75px solid transparent;
        border-bottom: 75px solid transparent;
        border-left: 150px solid #667eea;
        background: none;
      }

      /* 菱形 */
      .diamond {
        transform: rotate(45deg);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      /* 五角星 */
      .star {
        position: relative;
        width: 100px;
        height: 100px;
        background: #667eea;
        clip-path: polygon(
          50% 0%,
          61% 35%,
          98% 35%,
          68% 57%,
          79% 91%,
          50% 70%,
          21% 91%,
          32% 57%,
          2% 35%,
          39% 35%
        );
        margin: 0 auto;
      }

      /* 心形 */
      .heart {
        position: relative;
        width: 100px;
        height: 90px;
        background: none;
      }

      .heart::before,
      .heart::after {
        content: '';
        position: absolute;
        width: 52px;
        height: 80px;
        background: #667eea;
        border-radius: 52px 52px 0 0;
        top: 0;
      }

      .heart::before {
        left: 50px;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
      }

      .heart::after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
      }

      /* 六边形 */
      .hexagon {
        position: relative;
        width: 100px;
        height: 55px;
        background: #667eea;
        margin: 27.5px auto;
      }

      .hexagon::before,
      .hexagon::after {
        content: '';
        position: absolute;
        width: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
      }

      .hexagon::before {
        bottom: 100%;
        border-bottom: 27.5px solid #667eea;
      }

      .hexagon::after {
        top: 100%;
        border-top: 27.5px solid #667eea;
      }

      /* 圆形 */
      .circle {
        border-radius: 50%;
      }

      /* 椭圆 */
      .ellipse {
        border-radius: 50%;
        width: 200px;
        height: 100px;
      }

      /* 梯形 */
      .trapezoid {
        border-bottom: 100px solid #667eea;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        height: 0;
        width: 120px;
        background: none;
      }

      /* 平行四边形 */
      .parallelogram {
        transform: skew(20deg);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      /* 箭头 */
      .arrow-right {
        position: relative;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid #667eea;
        background: none;
      }

      .arrow-right::after {
        content: '';
        position: absolute;
        right: 100px;
        top: -40px;
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        border-left: 80px solid white;
      }
    </style>
  </head>
  <body>
    <div class="shape-item">
      <div class="shape-label">三角形 (向上)</div>
      <div class="shape-demo triangle-up"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">三角形 (向下)</div>
      <div class="shape-demo triangle-down"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">三角形 (向左)</div>
      <div class="shape-demo triangle-left"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">三角形 (向右)</div>
      <div class="shape-demo triangle-right"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">菱形</div>
      <div class="shape-demo diamond"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">五角星</div>
      <div class="shape-demo star"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">心形</div>
      <div class="shape-demo heart"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">六边形</div>
      <div class="shape-demo hexagon"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">圆形</div>
      <div class="shape-demo circle"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">椭圆</div>
      <div class="shape-demo ellipse"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">梯形</div>
      <div class="shape-demo trapezoid"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">平行四边形</div>
      <div class="shape-demo parallelogram"></div>
    </div>

    <div class="shape-item">
      <div class="shape-label">箭头</div>
      <div class="shape-demo arrow-right"></div>
    </div>
  </body>
</html>

